import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  ScrollView,
  Image,
  Text,
  TouchableOpacity,
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';
import { Constant } from '../../../../public/js/constant';
import getStorageValue from '../../../../utils/getStorageValue';
import fetchWebApi from '../../../../public/WebApi/fetchBase';
import { GET_USER_INFO } from '../../../../public/WebApi/myInfoDataInterface/userInfoListApi';
import Layer from '../../../../utils/Layer';

export default class security extends Component {
  constructor(props) {
    super(props)
    this.state = {
      phone: this.props.navigation.state.params.phone,
      Real: ''
    }
  }

  componentDidMount = () => {
    this.getUserInfo()
  }
  // 获取用户信息列表
  async getUserInfo() {
    const res = await fetchWebApi(GET_USER_INFO,
      { token: await getStorageValue(Constant.TOKEN) }, 'POST');
    // console.log(res.data);
    if (res.status == 200) {
      this.setState({
        Real: res.data[0].realName
      })
    } else if (res.status === 401) {
      console.log(res.status);
      await AsyncStorage.removeItem(Constant.TOKEN);
      this.props.navigation.push('Accountlogin')
      // 弹窗提示

    } else {
      Layer.showMsg("获取用户信息列表失败");
    }
  }
  phones() {
    let str = this.state.phone
    if (str) {
      let strs = str.split("")
      strs.splice(3, 4, '****')
      return strs
    } else {
      return (
        <Text>暂无用户账号</Text>
      )
    }

  }

  render() {
    return (
      <View style={styles.warper}>
        <NavBar
          navigation={this.props.navigation}
          title={"账号与安全"}
        />
        <ScrollView>
          {/* 电话号码和用户密码 */}
          <View style={{ marginTop: 10 }}>
            {/* <TouchableOpacity style={styles.security_view} onPress={() => {
              this.props.navigation.navigate('Mobilephonebinding')
            }}>
              <View style={styles.view_list}>
                <Text style={styles.view_text}>用户账号</Text>
                <View style={styles.list}>
                  <Text style={styles.list_text}>{this.phones()}</Text>
                  <Image source={require('../../../../assets/images/maillist/Vector.png')} />
                </View>
              </View>
            </TouchableOpacity> */}
            <TouchableOpacity style={styles.security_view} onPress={() => {
              this.props.navigation.navigate('loginPassword')
            }}>
              <View style={styles.view_list}>
                <Text style={styles.view_text}>登录密码</Text>
                <View style={styles.list}>
                  <Text style={styles.list_text}>点击修改</Text>
                  <Image source={require('../../../../assets/images/maillist/Vector.png')} />
                </View>
              </View>
            </TouchableOpacity>
          </View>
          {/* 实名认证 */}
          <TouchableOpacity onPress={() => {
            if (this.state.Real == '' || this.state.Real == undefined) {
              this.props.navigation.navigate('authentication', {
                refresh: () => {
                  this.getUserInfo()
                },
              })
            }
          }} style={styles.security}>
            <Text style={styles.view_text}>实名认证</Text>
            <View style={styles.list}>
              {/* 判断是否认证 */}
              <Text style={styles.list_text}>{this.state.Real == '' || this.state.Real == undefined ? '未认证' : '已认证'}</Text>
              <Image source={require('../../../../assets/images/maillist/Vector.png')} />
            </View>
          </TouchableOpacity>
          {/* 注销账号 */}
          {/* <TouchableOpacity style={styles.security}>
            <Text style={styles.view_text}>注销账号</Text>
            <Image source={require('../../../../assets/images/maillist/Vector.png')} />
          </TouchableOpacity> */}
        </ScrollView>
      </View >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  security: {
    height: 55,
    backgroundColor: '#fff',
    marginTop: 10,
    paddingLeft: 15,
    paddingRight: 15,
    display: 'flex',
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: 'space-between'
  },
  security_view: {
    backgroundColor: '#fff',
    paddingRight: 15,
    paddingLeft: 15
  },
  view_list: {
    height: 55,
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: 'space-between',
  },
  view_text: {
    fontSize: 16
  },
  list: {
    display: "flex",
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  list_text: {
    marginRight: 15
  }
})